<template>
  <div class="" ref="content">
    <el-form ref="form" label-width="100px" class="margin-top-bottom-20">
      <el-row class="row">
        <el-col :span="8">
          <el-form-item label="分区名">
            <el-select v-model="searchParams.partitionKey" clearable>
              <el-option v-for="item in areaList" :key="item.primaryKey" :label="item.partitionName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产编码">
            <el-input v-model="searchParams.assetCode" placeholder="请输入" clearable @keyup.enter.native="getList('')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="楼层">
            <el-input v-model="searchParams.buildingStorey" placeholder="请输入" type="number" clearable @keyup.enter.native="getList('')"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-button size="small" type="primary" @click="getList('')" class="f-right margin-left-10">查询</el-button>
          <el-button size="small" type="primary" @click="addArea" class="f-right" v-if="isPageEdit">新建分区</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-collapse v-model="activeNames">
      <template v-if="areaList.length > 0">
        <el-collapse-item :name="item.primaryKey" v-for="(item, index) in areaList" :key="item.primaryKey">
          <!-- 折叠的分区头部 -->
          <template slot="title">
            <div class="flex justify-between align-centers" style="width: 100%">
              <div class="flex align-center">
                <img class="building-icon margin-right-10" :src="parkIcon" v-if="item.partitionType == 'car_park'" />
                <img class="building-icon margin-right-10" :src="buildingIcon" v-if="item.partitionType == 'business_building'" />
                <span class="font-size-16">{{ item.partitionName }}</span>
                <span class="font-size-14 padding-left-20 color-999999">共有{{ item.floors.length }}楼层</span>
              </div>
              <div class="margin-right-10" v-if="isPageEdit">
                <el-button size="mini" type="info" icon="el-icon-edit" @click.stop="editArea(item)"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="deleteArea(item)"></el-button>
                <el-button size="mini" type="primary" @click.stop="addFloor(item)">新增楼层</el-button>
              </div>
            </div>
          </template>
          <div class="split-box flex-center-all bg-color-f2f3f5 font-size-14">{{ item.partitionDesc }}</div>
          <!-- 楼层 -->
          <div class="margin-bottom-15" :class="buildingIndex < item.floors.length - 1 ? 'building-box' : ''" v-for="(building, buildingIndex) in item.floors" :key="building.floorKey">
            <el-form :ref="`buildingform${buildingIndex}`" :model="building" label-width="130px" :disabled="!isPageEdit">
              <el-row class="row">
                <floor-form :purposeList="purposeList" :building="building"></floor-form>
                <el-col :span="24">
                  <el-form-item label="" v-if="isPageEdit">
                    <el-button class="f-right margin-top-5" size="mini" type="danger" plain @click.stop="deleteFloor(building, item.floors, buildingIndex)">删除</el-button>
                    <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="saveFloor(building, buildingIndex, item.primaryKey)">保存</el-button>
                  </el-form-item>
                </el-col>
                <div class="border-bottom-dashed-F2F2F2 cut-off-line f-left margin-bottom-10"></div>
              </el-row>
            </el-form>
            <!-- 图纸资产 -->
            <section class="svg-point-box" v-if="building.primaryKey" @click="showAndEditSvg(building)">
              <!-- 按钮组 -->
              <el-form ref="pinForm" label-width="130px" class="drawing-foem-box">
                <el-row class="row">
                  <el-col :span="8">
                    <el-form-item label="楼层图">
                      <el-select :disabled="building.isEdit ? true : false" v-model="building.version" placeholder="无版本" @change="changeVersion(building)">
                        <el-option v-for="item in building.floorPlanList" :key="item.version" :label="item.version" :value="item.version" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="">
                      <!-- 类型tips -->
                      <typeTips></typeTips>
                      <!-- projectStatus 1:草稿 2:已开通  只有类型item.partitionType = business_building 的才能进行合铺等操作-->
                      <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="approveSubmit" v-if="building.isEdit && (model.projectStatus == 1 || !model.projectStatus)">提交</el-button>

                      <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="approveFn(item.partitionType)" v-if="building.isEdit && model.projectStatus == 2">提审</el-button>

                      <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="addSpace(building, 'merge')" v-if="building.isEdit && item.partitionType == 'business_building'">合铺</el-button>

                      <uploadFile class="f-right margin-right-10" :floor-key="building.floorKey" filed-name="file" :max-size="100" :limit="100" prefix="/commercialrent/v1" action="/basic/shop/room/svgUpload" accept-file-type=".svg" @handleSuccess="handleSuccess($event, building.floorKey, building.version)" btn-name="更新图纸" v-if="building.isEdit" :otherData="{ primaryKey: draftPlanKey, workId: workId, floorKey: building.floorKey, version: building.version ? building.version : '', spaceKey: paramSpaceKey }"></uploadFile>

                      <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="addSpace(building, 'add')" v-if="building.isEdit && item.partitionType == 'business_building'">新增空间</el-button>

                      <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="draftFn(building, index, buildingIndex)" v-if="!building.isEdit && isPageEdit">编辑</el-button>

                      <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="draftFn(building)" v-if="building.isEdit">取消编辑</el-button>

                      <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="initPoint(building)" v-if="building.isEdit && item.partitionType == 'business_building'">初始化点位</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <div class="svg-point-arrow">
                <i :class="'el-icon-arrow-' + (showSvgMap[building.primaryKey] ? 'down' : 'right')"></i>
              </div>
            </section>
            <section v-show="building.primaryKey && showSvgMap[building.primaryKey]">
              <div class="drawing-box flex padding-top-20 padding-bottom-5">
                <!-- 图片 -->
                <div class="svg-out-box" :style="{width:svgWidth + 'px'}">
                  <vue-svg v-if="building.cadDrawing" class="svg-box" :svg-string="building.cadDrawingText" :max-zoom="1" :min-zoom="1" :svg-height="building.svgHeight" :scale="1" :svgWidth="building.svgWidth" @click="handleClick($event, index, buildingIndex, building.spaceList, building.isEdit)" :ref="`vueSvg${index}${buildingIndex}`">
                    <g slot="remark">
                      <template v-for="assets in building.spaceList">
                        <text class="font-size-12" v-if="assets.positionX && assets.positionX != 0" :key="assets.primaryKey" :x="assets.positionX" :y="assets.positionY" text-anchor="middle" dominant-baseline="middle">{{ assets.name }}</text>
                      </template>
                    </g>
                  </vue-svg>
                  <el-empty class="svg-box flex-1" style="height:100%;" v-else description="暂无图纸"></el-empty>
                </div>

                <!-- 所有点位  v-if="building.isEdit"-->
                <div class="point-box padding-left-15">
                  <el-tooltip placement="right" v-for="assets in building.spaceList" :key="assets.priamryKey">
                    <div slot="content" v-if="assets.shopAndActivityInfo">
                      <div class="padding-right-10">
                        <el-button type="text" class="s-size" @click="assetInfo(assets.shopAndActivityInfo, building, assets.operateAction, assets.positionX, assets.positionY)">详情</el-button>
                        <el-button v-if="(!assets.positionX || assets.positionX == 0) && building.isEdit" type="text" class="color-red s-size" @click="assetDelete(assets.shopAndActivityInfo)">删除</el-button>
                      </div>
                    </div>
                    <div v-if="assets.shopAndActivityInfo" class="flex margin-bottom-10 cursor-pointer align-center">
                      <i class="icon el-icon-location font-size-25" :style="[{ color: setBgCalssName(assets.shopAndActivityInfo.spaceType, assets.operateAction) }]"></i>
                      <div class="padding-right-10 margin-top-5">{{ assets.name || '暂无名称' }}</div>
                      <div v-if="assets.positionX && assets.positionX != 0" class="bind-point margin-left-5"></div>
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </section>
          </div>
        </el-collapse-item>
      </template>
      <el-empty v-else description="暂无数据"></el-empty>
    </el-collapse>

    <!-- 新增分区 -->
    <zc-area ref="areaDialog" :dialog-show="dialogObj.areaDialog" :formModel="dialogObj.areaModel" @hideDialog="hideAllDialog" @getList="getList" :space-key="paramSpaceKey"></zc-area>
    <!-- 空间信息 | 商铺信息 | 合铺 -->
    <zc-space ref="spaceDialog" :dialog-show="dialogObj.spaceDialog" :spaceList="spaceList" :formModel="dialogObj.spaceModel" @hideDialog="hideAllDialog" @reloadAssetsData="reloadAssetsData" :is-merge="dialogObj.isMerge" :work-id="workId" @separateShop="separateShop" :is-edit="dialogObj.isSpaceEdit" :shop-list="dialogObj.shopList" :spaceKey="paramSpaceKey"></zc-space>
    <!-- 拆铺 -->
    <zc-shopSeparate ref="separateDialog" :dialog-show="dialogObj.shopSeparateDialog" :formModel="dialogObj.shopSeparateModel" :spaceKey="paramSpaceKey" @hideDialog="hideAllDialog" @getList="reloadAssetsData" :work-id="workId"></zc-shopSeparate>
    <!-- 绑定空间资产 -->
    <choose-space ref="space" :sapce-list="svgObj.dialogSpaceList" @mountSvg="mountSvg"></choose-space>
  </div>
</template>
<script>
  import formCommon from '@g/components/form/formCommon.vue';
  import { requestTips, askDialog } from '../../../assets/util';
  import * as Build from '../../../api/building';
  import { dictList } from '../../../api/common';
  import uploadFile from '../modules/upload.vue';
  import zcArea from '../modules/dialog/zcArea.vue';
  import zcShopSeparate from '../modules/dialog/zcShopSeparate.vue';
  import zcSpace from '../modules/dialog/zcSpace.vue';
  import chooseSpace from '../modules/dialog/chooseSpace.vue';
  import typeTips from '../modules/building/typeTips.vue';
  import floorForm from '../modules/building/floorForm.vue';
  import projectInfoApi from '../../../api/projectInfo';
  import $ from 'jquery';
  export default {
    props: {
      spaceKey: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        areaList: [],
        searchParams: { partitionKey: '', assetCode: '', buildingStorey: '' },
        floorModel: { floorName: '', buildingStorey: '', floorCoding: '', useFactory: '', shareArea: '', buildingArea: '', theLevel: '', useFactory: '', cadArea: '', planUse: '', warrantyTime: '', remark: '' },
        svgObj: {
          dialogSpaceList: [], //绑定svg时的待选择的商铺
          svgIndex: null, //点击svg的时候确认该是第几个，锁定ref
          tag: null, //点击svg具体哪个矢量图
          position: { x: 0, y: 0 },
        },
        activeNames: [],
        showSvgMap: {},
        purposeList: [], //规划用途
        spaceList: [], //空间类型
        dialogObj: {
          //分区
          areaDialog: false,
          areaModel: {
            partitionType: '',
            partitionName: '',
            partitionDesc: '',
          },
          //空间信息 | 商铺信息
          spaceDialog: false,
          isSpaceEdit: false,
          spaceModel: {
            code: '',
            name: '',
            spaceType: '',
            shopCode: '',
            shopNumber: '',
            cadArea: '',
            buildingArea: '',
            planUse: '',
            effectiveDate: '',
            expirationDate: '',
            shopTag: '',
            status: '',
          },
          //拆铺
          shopSeparateDialog: false,
          shopSeparateModel: {},
          isMerge: false, //是否是合铺的标识
          //提审
          approDialog: false,
          //合铺
          shopList: [], //合铺时当前楼层下可合并的商铺
        },
        workId: '',
        model: {},
        svgWidth: 0,
        draftPlanKey: '', //点击编辑的时候该楼层的版本key
        cadDrawing: '', //点击编辑的时候svg图的key
        parkIcon: require('../../../assets/imgs/parking.png'),
        buildingIcon: require('@/common/imgs/xiezilou.png'),
      };
    },

    computed: {
      isPageEdit() {
        return !this.$route.query.taskId;
      },
      paramSpaceKey() {
        return this.spaceKey || this.$route.query.spaceKey;
      },
    },

    methods: {
      init() {
        this.getProjectInfo();
        this.getList();
        this.getPurposeList();
        this.getSpaceList();
        this.svgWidth = this.$refs.content.clientWidth - 220;
      },

      showAndEditSvg(item) {
        let showSvgMap = Object.assign({}, this.showSvgMap);
        // 第一次查询版本
        if (showSvgMap[item.primaryKey] === undefined) {
          this.changeVersion(item);
        }

        showSvgMap[item.primaryKey] = !showSvgMap[item.primaryKey];

        this.showSvgMap = showSvgMap;
      },
      async getProjectInfo() {
        let res = await projectInfoApi.apiProjectInfo({
          spaceKey: this.paramSpaceKey,
        });
        this.model = res;
      },
      //规划用途字典
      async getPurposeList() {
        let res = await dictList({
          dictType: 'planning_type',
        });
        this.purposeList = res.rows || [];
      },
      //空间类型字典
      async getSpaceList() {
        let res = await dictList({
          dictType: 'space_type',
        });
        this.spaceList = res.rows || [];
      },
      //数据源
      async getList() {
        this.searchParams.buildingStorey = parseInt(this.searchParams.buildingStorey);
        let res = await Build.apiBuildingInfo({
          spaceKey: this.paramSpaceKey,
          ...this.searchParams,
        });
        res.rows.forEach(item => {
          this.activeNames.push(item.primaryKey);
          item.floors.forEach(floor => {
            floor.isEdit = false;
            this.setShopAndActivityInfo(floor.spaceList);
          });
        });
        this.areaList = res.rows || [];
        this.hideAllDialog();
      },
      //楼道消防通道没有shopAndActivityInfo手动添加,后台不同空间资产数据格式不统一，遂前端强制统一处理
      setShopAndActivityInfo(list) {
        list.forEach(space => {
          if (!space.shopAndActivityInfo) {
            space.shopAndActivityInfo = {
              spaceType: String(space.targetType),
              code: space.code,
              name: space.name,
              primaryKey: space.primaryKey,
              floorKey: space.floorKey,
            };
          }
          space.shopAndActivityInfo.pointKey = space.primaryKey;
        });
      },
      //更新全页面数据
      reloadData() {
        this.hideAllDialog();
      },
      //更新楼层资产空间 agignUpload:只有更新图纸的时候才有这个参数，用于更新图纸后，重新绑定svg矢量图的data-id：空间的点位key 外层的primaryKey
      async reloadAssetsData(floorKey, agignUpload) {
        this.hideAllDialog();
        let res = await Build.apiBuildingDraft({
          workId: this.workId,
        });
        this.updateSpaceData(res, floorKey, agignUpload);
        if (res.floorPlanList.length > 0) {
          this.cadDrawing = res.floorPlanList[0].cadDrawing;
          this.draftPlanKey = res.floorPlanList[0].primaryKey;
          this.setShopAndActivityInfo(res.spaceList);
        } else {
          this.cadDrawing = '';
          this.draftPlanKey = '';
        }
      },
      // ----------------------------------------------------- 分区 -----------------------------------------------------
      //新建分区
      addArea() {
        this.dialogObj.areaModel = {
          partitionType: '',
          partitionName: '',
          partitionDesc: '',
        };
        this.dialogObj.areaDialog = true;
      },
      //编辑分区
      editArea(item) {
        this.dialogObj.areaModel = item;
        this.dialogObj.areaDialog = true;
      },
      //删除分区
      async deleteArea(item) {
        askDialog('确认删除？', async () => {
          let res = await Build.apiAreaDelete({ primaryKey: item.primaryKey });
          requestTips(res, () => {
            this.getList();
          });
        });
      },
      // ----------------------------------------------------- 楼层-----------------------------------------------------
      //新增楼层
      addFloor(item) {
        let param = JSON.parse(JSON.stringify(this.floorModel));
        item.floors.unshift(param);
      },
      //保存楼层
      async saveFloor(item, index, areaKey) {
        let formName = 'buildingform' + index;
        // this.$refs[formName][0].validate(async valid => {
        //   if (valid) {
            let param = JSON.parse(JSON.stringify(item));
            param.spaceKey = this.paramSpaceKey;
            param.partitionKey = areaKey;
            let res = item.primaryKey ? await Build.apiFloorUpdate(param) : await Build.apiFloorAdd(param);
            requestTips(res, () => {
              this.getList();
            });
        //   }
        // });
      },
      //删除楼层
      deleteFloor(data, floorList, index) {
        if (data.floorPlanList && data.floorPlanList.length > 0) {
          this.$message.warning('楼层下有过审版本');
          return;
        }
        askDialog('是否删除该楼层？', async () => {
          if (data.primaryKey) {
            const res = await Build.apiFloorDelete({ primaryKey: data.primaryKey });
            requestTips(res, () => {
              this.getList();
            });
          } else {
            floorList.splice(index, 1);
          }
        });
      },
      // ----------------------------------------------------- 空间资产-----------------------------------------------------
      //新增空间 | 合铺
      addSpace(floor, type) {
        // if (!floor.cadDrawingText) {
        //   this.$message.warning('请先上传图纸');
        //   return;
        // }
        this.dialogObj.isSpaceEdit = floor.isEdit;

        for (let i in this.dialogObj.spaceModel) {
          this.dialogObj.spaceModel[i] = '';
        }
        if (type == 'merge') {
          //合铺
          this.dialogObj.shopList = [];
          this.dialogObj.spaceDialog = true;
          this.dialogObj.isMerge = true;
          floor.spaceList.forEach(item => {
            if (item.shopAndActivityInfo.spaceType == '1' && item.operateAction != 2) {
              this.dialogObj.shopList.push(item.shopAndActivityInfo);
            }
          });
        } else {
          this.dialogObj.spaceDialog = true;
          this.dialogObj.isMerge = false;
        }
        this.$refs.spaceDialog.setFloorData(floor.floorKey, floor.version);
      },
      //空间详情 operateAction==2说明是禁用状态
      assetInfo(data, floor, operateAction, positionX, positionY) {
        this.dialogObj.isMerge = false;
        data.positionX = positionX;
        data.positionY = positionY;
        this.dialogObj.spaceModel = JSON.parse(JSON.stringify(data));
        this.dialogObj.isSpaceEdit = operateAction == 2 ? false : floor.isEdit;
        this.dialogObj.spaceDialog = true;
        this.$refs.spaceDialog.setFloorData(floor.floorKey);
      },
      //空间进入编辑状态 floor:楼层数据 index：分区index buildingIndex：楼层index
      async draftFn(floor, index, buildingIndex) {
        //编辑状态
        if (!floor.isEdit) {
          this.svgObj.svgIndex = String(index) + buildingIndex;
          let hasEdit = false;
          //检查是否还有其他楼层处于编辑状态
          this.areaList.forEach(area => {
            area.floors.forEach(floor => {
              if (floor.isEdit) {
                hasEdit = true;
              }
            });
          });
          if (hasEdit) {
            this.$message.warning('存在其他编辑状态下的楼层，请先取消其编辑状态！');
            return;
          }
          let res = await Build.getWorkId({ spaceKey: this.paramSpaceKey, workType: 1, floorKey: floor.floorKey });
          //1-待审核//2-审核中//3-通过//4-不通过
          if (res.procStatus == 2) {
            this.$message.warning('审批中，无草稿数据');
            return;
          }
          this.workId = res.workId;
          floor.isEdit = !floor.isEdit;
          this.reloadAssetsData(floor.floorKey);
        } else {
          //取消编辑
          floor.isEdit = !floor.isEdit;
          this.changeVersion(floor);
          if (!floor.floorPlanList || floor.floorPlanList.length == 0) {
            floor.cadDrawingText = '';
            floor.cadDrawing = '';
          }
        }
      },
      //空间删除
      assetDelete(data) {
        let apiName = '';
        if (data.spaceType == '5' || data.spaceType == '6') {
          apiName = 'apiSpaceDelete';
        } else if (data.spaceType == '1' || data.spaceType == '3' || data.spaceType == '4' || data.spaceType == '7' || data.spaceType == '8' || data.spaceType == '9') {
          apiName = 'apiShopDelete';
        } else if (data.spaceType == '2') {
          apiName = 'apiActivitySpaceDelete';
        }
        askDialog('确认删除？', async () => {
          let res = await Build[apiName]({ primaryKey: data.primaryKey });
          requestTips(res, () => {
            this.reloadAssetsData(data.floorKey);
          });
        });
      },
      //拆铺
      separateShop(version) {
        this.dialogObj.spaceDialog = false;
        this.dialogObj.shopSeparateModel = this.dialogObj.spaceModel;
        this.dialogObj.shopSeparateDialog = true;
        this.$nextTick(() => {
          this.$refs.separateDialog.addList = [];
          this.$refs.separateDialog.version = version;
        });
      },
      //切换版本
      async changeVersion(floorData) {
        if (!floorData.version) return;
        let res = await Build.apiGetInfoByVersion({ version: floorData.version, floorKey: floorData.floorKey });
        this.setShopAndActivityInfo(res.spaceList);
        this.updateSpaceData(res, floorData.floorKey);
        floorData.isEdit = false;
      },
      //更新单个楼层图纸和资产信息
      updateSpaceData(res, floorKey, agignUpload) {
        this.areaList.forEach((area, index) => {
          area.floors.forEach((floor, floorIndex) => {
            if (floor.floorKey == floorKey) {
              floor.spaceList = res.spaceList;
              if (res.floorPlanList.length > 0) {
                floor.cadDrawingText = res.floorPlanList[0].cadDrawingText;
                floor.cadDrawing = res.floorPlanList[0].cadDrawing;
                floor.svgHeight = res.floorPlanList[0].svgHeight;
                floor.svgWidth = res.floorPlanList[0].svgWidth;
                floor.newestVersion = res.floorPlanList[0].version;
              }

              if (agignUpload) {
                this.bindDataId(floor.spaceList, index, floorIndex);
              }
            }
          });
        });
      },
      //更新图纸后绑定data-id 和颜色
      bindDataId(spaceList, index, floorIndex) {
        let list = [];
        let colorObj = {};
        let svgIndex = String(index) + floorIndex;
        spaceList.forEach(item => {
          if (item.positionX && item.positionX != 0) {
            list.push({
              x: item.positionX,
              y: item.positionY,
              id: item.code,
            });
            colorObj[item.code] = this.setBgCalssName(item.shopAndActivityInfo.spaceType, item.operateAction);
          }
        });
        this.$nextTick(() => {
          this.$refs['vueSvg' + svgIndex][0].setAreaBussinessId(list);
          // this.$refs['vueSvg' + svgIndex][0].setFillColorByDataIdColorMap(colorObj);
          setTimeout(() => {
            let svgHtml = this.$refs['vueSvg' + svgIndex][0].getSvgContentStr();
            this.updateCad(svgHtml);
          }, 500);
        });
      },
      approveSubmit() {
        askDialog('确认提交？', async () => {
          let data = {
            workType: 1,
            spaceKey: this.paramSpaceKey,
            workId: this.workId,
          };
          const res = await projectInfoApi.summitAuditAndSuccess(data);
          requestTips(res, () => {
            this.getProjectInfo();
            this.getList();
          });
        });
      },
      //提审
      async approveFn(type) {
        let pathUrl = {
          name: 'arraignment-zcApprove',
          query: {
            ...this.$route.query,
            workId: this.workId,
            areaType: type,
          },
        };
        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },
      //附件上传成功
      async handleSuccess(data, floorKey, version) {
        this.reloadAssetsData(floorKey, 'agignUpload');
      },
      //隐藏所有弹框
      hideAllDialog() {
        this.dialogObj.areaDialog = false;
        this.dialogObj.spaceDialog = false;
        this.dialogObj.shopSeparateDialog = false;
        this.dialogObj.approDialog = false;
      },
      //改变位置
      async setPosition(item, positionX, positionY) {
        if (!item || !item.primaryKey) {
          this.$message.warning('解绑失败！');
          return false;
        }
        let res = await Build.apiSpaceUpdate({
          primaryKey: item.primaryKey,
          assetType: item.shopAndActivityInfo.spaceType,
          positionX: positionX,
          positionY: positionY,
        });
        this.reloadAssetsData(item.shopAndActivityInfo.floorKey);
        return true;
      },
      //初始化本楼层所有点位位置
      initPoint(floor) {
        askDialog('确认初始化？', async () => {
          let res = await Build.apiSpaceUpdate({
            floorKey: floor.floorKey,
            version: floor.newestVersion,
            positionX: 0,
            positionY: 0,
          });
          if (res.success) {
            this.$refs['vueSvg' + this.svgObj.svgIndex][0].clearAllDataId();
            setTimeout(() => {
              let svgHtml = this.$refs['vueSvg' + this.svgObj.svgIndex][0].getSvgContentStr();
              this.updateCad(svgHtml, () => {
                requestTips(res, () => {
                  this.reloadAssetsData(floor.floorKey);
                });
              });
            }, 200);
          }
        });
      },
      //更新cad
      async updateCad(cad, cb) {
        let res = await Build.apiUpdateCad({
          primaryKey: this.cadDrawing,
          cadDrawing: cad,
        });
        cb && cb();
      },
      //设置点位类型背景色 operateAction = 2是禁用状态
      setBgCalssName(type, operateAction) {
        switch (type) {
          case '1':
            if (operateAction == 2) {
              return '#cccccc';
            } else {
              return 'rgb(9, 9, 233)';
            }
          case '2':
            return 'rgb(228, 214, 20)';
          case '3':
            return 'rgb(249, 0, 240)';
          case '4':
            return 'rgb(105, 105, 210)';
          case '6':
            return 'rgb(243, 80, 4)';
          case '5':
            return 'rgb(94, 236, 12)';
          case '9':
            return 'rgb(157, 202, 216)';
          case '8':
            return 'rgb(34, 34, 31)';
          case '7':
            return 'rgb(107, 72, 31)';
        }
      },
      //绑定商铺到svg
      async mountSvg(space) {
        this.$refs['vueSvg' + this.svgObj.svgIndex][0].setDataIdByElement(this.svgObj.tag, space.code); //设置data-id
        space.positionX = this.svgObj.position.x;
        space.positionY = this.svgObj.position.y;
        let svgHtml = this.$refs['vueSvg' + this.svgObj.svgIndex][0].getSvgContentStr();
        await this.updateCad(svgHtml);
        this.setPosition(space, this.svgObj.position.x, this.svgObj.position.y);
        // let colorClass = this.setBgCalssName(space.shopAndActivityInfo.spaceType, space.operateAction);
        // this.$refs['vueSvg' + this.svgObj.svgIndex][0].setFillColorByDataId(space.primaryKey, colorClass); //设置颜色
        this.$refs.space.hideDialog();
      },
      //点击svg
      handleClick(e, index, buildingIndex, spaceList, isEdit) {
        console.log(e)
        let allowTagList = ['rect', 'circle', 'ellipse', 'polygon', 'path'];
        if (allowTagList.indexOf(e.target.tagName) < 0 || !isEdit) {
          return;
        }
        this.svgObj.svgIndex = String(index) + buildingIndex;
        this.svgObj.tag = e.srcElement || e.target;
        let attrDataCode = $(e.target).attr('data-id');
        //有data-id时点击进行解绑
        if (attrDataCode) {
          let assets = spaceList.find(item => item.code == attrDataCode);
          askDialog('确认解绑？', () => {
            this.removeBind(attrDataCode, assets);
          });
          return;
        }
        this.svgObj.dialogSpaceList = spaceList;
        this.svgObj.position = {
          x: e.offsetX,
          y: e.offsetY,
        };
        this.$refs.space.dialogShow = true;
        this.$refs.space.spaceKey = '';
      },
      //解绑svg
      async removeBind(code, assets) {
        let isRmove = await this.setPosition(assets, 0, 0);
        if (!isRmove) return false;
        // this.$refs['vueSvg' + this.svgObj.svgIndex][0].setFillColorByDataId(code, '#f1f1f1');
        this.$refs['vueSvg' + this.svgObj.svgIndex][0].setDataIdByElement(this.svgObj.tag, '');
        setTimeout(() => {
          let svgHtml = this.$refs['vueSvg' + this.svgObj.svgIndex][0].getSvgContentStr();
          this.updateCad(svgHtml);
        }, 200);
      },
    },

    components: { zcArea, zcShopSeparate, zcSpace, uploadFile, chooseSpace, formCommon, typeTips, floorForm },
  };
</script>
<style lang="scss" scoped>
  .building-icon {
    width: 20px;
    height: 20px;
  }
  .el-form {
    margin-left: -10px;
  }
  .split-box {
    width: 100%;
    height: 40px;
    margin: 10px 0;
  }

  .cut-off-line {
    width: 100%;
    height: 1px;
  }

  .building-box {
    border-bottom: 5px solid #f1f1f1;
  }

  .svg-point-box {
    display: flex;
    align-items: center;
    cursor: pointer;

    .el-button + .el-button {
      margin-left: 0 !important;
    }
  }

  .drawing-foem-box {
    flex: 1;
    height: 48px;
    overflow: hidden;
  }

  .svg-point-arrow {
    width: 16px;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    margin-top: -6px;
    margin-right: 3px;
  }

  .drawing-box {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-top: 1px dashed #f1f1f1;
    .point-box {
      width: 200px;
      height: 600px;
      overflow-y: auto;
    }
  }
  .svg-box {
    // border: 1px solid #f1f1f1;
    // overflow: hidden;
  }
  .svg-out-box{
    overflow: auto;
    border: 1px solid #f1f1f1;
  }
  .bind-point {
    width: 5px;
    height: 5px;
    background: red;
    border-radius: 50%;
  }
</style>
